
<!-- Chat Field -->

<div class="chat-field">
	<div class="ui-block-title">
		<h6 class="title">Elaine Dreyfuss</h6>
		<a href="#" class="more"><svg class="olymp-three-dots-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use></svg></a>
	</div>
	<div class="mCustomScrollbar" data-mcs-theme="dark">
		<ul class="notification-list chat-message chat-message-field">
			<li>
				<div class="author-thumb">
					<img src="img/avatar10-sm.jpg" alt="author">
				</div>
				<div class="notification-event">
					<a href="#" class="h6 notification-friend">Elaine Dreyfuss</a>
					<span class="notification-date"><time class="entry-date updated" datetime="2004-07-24T18:18">Yesterday at 8:10pm</time></span>
					<span class="chat-message-item">Hi James, How are your doing? Please remember that next week we are going to Gotham Bar to celebrate Marina’s Birthday.</span>
				</div>
			</li>

			<li>
				<div class="author-thumb">
					<img src="img/author-page.jpg" alt="author">
				</div>
				<div class="notification-event">
					<a href="#" class="h6 notification-friend">James Spiegel</a>
					<span class="notification-date"><time class="entry-date updated" datetime="2004-07-24T18:18">Yesterday at 8:30pm</time></span>
					<span class="chat-message-item">Hi Elaine! I have a question, do you think that tomorrow we could talk to
											the client to iron out some details before the presentation? I already finished the first screen but
											I need to ask him something before moving on. Anyway, here’s a preview!
										</span>
					<div class="added-photos">
						<img src="img/photo-message1.jpg" alt="photo">
						<img src="img/photo-message2.jpg" alt="photo">
						<span class="photos-name">icons.jpeg; bunny.jpeg</span>
					</div>
				</div>
			</li>

			<li>
				<div class="author-thumb">
					<img src="img/avatar10-sm.jpg" alt="author">
				</div>
				<div class="notification-event">
					<a href="#" class="h6 notification-friend">Elaine Dreyfuss</a>
					<span class="notification-date"><time class="entry-date updated" datetime="2004-07-24T18:18">Yesterday at 9:56pm</time></span>
					<span class="chat-message-item">We’ll have to check that at the office and see if the client is on board with it. I think That looks really good!</span>
				</div>
			</li>
		</ul>
	</div>

	<form>

		<div class="form-group label-floating is-empty">
			<label class="control-label">Write your reply here...</label>
			<textarea class="form-control" placeholder=""  ></textarea>
		</div>

		<div class="add-options-message">
			<a href="#" class="options-message">
				<svg class="olymp-computer-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-computer-icon"></use></svg>
			</a>
			<a href="#" class="options-message">
				<svg class="olymp-computer-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-computer-icon"></use></svg>
			</a>
			<div class="options-message smile-block">
				<svg class="olymp-happy-sticker-icon"><use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-sticker-icon"></use></svg>

				<ul class="more-dropdown more-with-triangle triangle-bottom-right">
					<li>
						<a href="#">
							<img src="img/icon-chat1.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat2.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat3.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat4.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat5.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat6.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat7.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat8.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat9.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat10.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat11.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat12.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat13.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat14.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat15.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat16.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat17.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat18.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat19.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat20.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat21.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat22.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat23.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat24.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat25.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat26.png" alt="icon">
						</a>
					</li>
					<li>
						<a href="#">
							<img src="img/icon-chat27.png" alt="icon">
						</a>
					</li>
				</ul>
			</div>

			<button class="btn btn-primary btn-sm">Post Reply</button>
		</div>

	</form>

</div>

<!-- ... end Chat Field -->
